<template>
  <div class="waves-container">
    <div class="waves">
      <div class="gentle-wave wave1"></div>
      <div class="gentle-wave wave2"></div>
      <div class="gentle-wave wave3"></div>
      <div class="gentle-wave wave4"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Waves'
}
</script>

<style scoped>
.waves-container {
  position: relative;
  width: 100%;
  height: 15vh; /* 增大高度以增大振幅 */
  min-height: 3.125rem;
  max-height: 9.375rem;
  z-index: 1;
}

.waves {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.gentle-wave {
  position: absolute;
  width: 300%; /* 增大波浪的宽度以增大振幅 */
  height: 100%;
  background-repeat: no-repeat;
  background-position: 0 bottom;
}

.wave1 {
  animation: move-forever 15s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  animation-delay: -2s;
  animation-duration: 7s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 24 150 48' preserveAspectRatio='none' shape-rendering='auto'%3E%3Cpath id='gentle-wave' d='M-160 44c30 0 58-28 88-28s 58 28 88 28 58-28 88-28 58 28 88 28v44h-352z' fill='rgba(173, 216, 230, 0.9)'/%3E%3C/svg%3E");
}

.wave2 {
  animation: move-forever 12s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  animation-delay: -3s;
  animation-duration: 10s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 24 150 48' preserveAspectRatio='none' shape-rendering='auto'%3E%3Cpath id='gentle-wave' d='M-160 44c30 0 58-28 88-28s 58 28 88 28 58-28 88-28 58 28 88 28v44h-352z' fill='rgba(173, 216, 230, 0.7)'/%3E%3C/svg%3E");
}

.wave3 {
  animation: move-forever 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  animation-delay: -4s;
  animation-duration: 13s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 24 150 48' preserveAspectRatio='none' shape-rendering='auto'%3E%3Cpath id='gentle-wave' d='M-160 44c30 0 58-28 88-28s 58 28 88 28 58-28 88-28 58 28 88 28v44h-352z' fill='rgba(173, 216, 230, 0.5)'/%3E%3C/svg%3E");
}

.wave4 {
  animation: move-forever 8s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  animation-delay: -5s;
  animation-duration: 20s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 24 150 48' preserveAspectRatio='none' shape-rendering='auto'%3E%3Cpath id='gentle-wave' d='M-160 44c30 0 58-28 88-28s 58 28 88 28 58-28 88-28 58 28 88 28v44h-352z' fill='rgba(173, 216, 230, 0.3)'/%3E%3C/svg%3E");
}

/* 波浪动画 */
@keyframes move-forever {
  0% {
    transform: translate3d(-120px, 0, 0);
  }

  100% {
    transform: translate3d(120px, 0, 0);
  }
}

@media (max-width: 768px) {
  .waves-container {
    height: 10vh;
    min-height: 10vh;
  }
}
</style>
